<template>
  <div class="index-pages">
    <div class="banner-box">
      <div class="banner-title">
        <div class="title-text">
          <img :src="'./images/index-logo.png'" class="logo" />
        </div>
      </div>
      <div class="banner-content" :style="`zoom:${zoom}`">
        <div
          class="banner"
          :class="`p-${i}`"
          v-for="i in 15"
          :key="i"
          :style="getStyle(i)"
          @click="handleTo(i)"
        >
          <img :src="`./images/banner-${i}.png`" class="banner-img" />
        </div>
      </div>
      <div class="banner-left"></div>
      <div class="banner-right"></div>
      <div class="banner-bottom">
        <div class="banner-login"></div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, onMounted, onUnmounted } from "vue";
import { useRouter } from "vue-router";
const router = useRouter();
const zoom: any = ref(window.innerWidth / 1920);
window.addEventListener("resize", () => {
  computedZoom();
});
const computedZoom = () => {
  if (window.innerWidth < 1920) {
    zoom.value = window.innerWidth / 1920;
  } else {
    zoom.value = 1;
  }
};
onUnmounted(() => {
  window.removeEventListener("resize", () => {});
});
onMounted(() => {
  computedZoom();
});
const handleTo = (i: number) => {
  if (i == 7) {
    router.push({
      path: "standard-experimental-library",
    });
  }
};
const getStyle = (i: number) => {
  return {
    "--amplitude": `${5 + Math.random() * 5}px`,
    "--duration": `${5 + Math.random() * 3}s`,
    "--delay": `${i * 0.1}s`,
    "--rotate-deg": `${Math.random() > 0.5 ? 1 : -1}deg`,
  };
};
</script>
<style lang="less" scoped>
.index-pages {
  background: rgba(9, 18, 76, 1) url(./images/banner-bg.png) no-repeat center
    center;
  background-size: 100% auto;

  width: 100%;
  height: 100%;
  .banner-box {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;

    .banner-title {
      position: absolute;
      top: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 1440px;
      height: 106px;
      background: url(@/assets/index-header-bg.png) no-repeat center;
      background-size: 100% 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      .title-text {
        width: 396px;
        padding-bottom: 5px;
        .logo {
          width: 23px;
          height: 29px;
        }
      }
    }
    .banner-left {
      background: url(@/assets/images/banner-left.png) no-repeat center;
      background-size: 100% 100%;
      width: 30px;
      height: 523px;
      position: absolute;
      left: 12px;
      top: 50%;
      transform: translateY(-50%);
    }
    .banner-right {
      background: url(@/assets/images/banner-right.png) no-repeat center;
      background-size: 100% 100%;
      width: 30px;
      height: 523px;
      position: absolute;
      right: 12px;
      top: 50%;
      transform: translateY(-50%);
    }
    .banner-bottom {
      position: absolute;
      bottom: -145px;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      height: 235px;
      width: 1981px;
      justify-content: center;
      padding-top: 24px;
      box-sizing: border-box;
      background: url(@/assets/images/banner-bottom.png) no-repeat center;
      background-size: 100% auto;

      .banner-login {
        width: 182px;
        height: 64px;
        text-align: center;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 18px;
        line-height: 64px;
        color: #fff;
        font-style: normal;
        cursor: pointer;
      }
    }

    .banner-content {
      position: relative;
      height: 590px;
      width: 1513px;
      z-index: 99;
      .banner {
        position: absolute;
        z-index: 1;
        cursor: pointer;
        animation: float var(--duration) ease-in-out infinite var(--delay);
        @keyframes float {
          0%,
          100% {
            transform: translateY(0) rotate(0deg);
          }
          50% {
            transform: translateY(calc(-1 * var(--amplitude)))
              rotate(var(--rotate-deg));
          }
        }
        &.p-1 {
          left: 225px;
          top: 5px;
          z-index: 2;
          width: 256px;
          height: 187px;
        }
        &.p-2 {
          left: 528px;
          top: 71px;
          width: 162px;
          height: 105px;
        }
        &.p-3 {
          left: 727px;
          top: 102px;
          z-index: 6;
          width: 149px;
          height: 90px;
        }
        &.p-4 {
          left: 899px;
          top: 0px;
          width: 228px;
          height: 260px;
        }
        &.p-5 {
          left: 0px;
          top: 225px;
          width: 396px;
          height: 203px;
        }
        &.p-6 {
          left: 323px;
          top: 198px;
          z-index: 3;
          width: 188px;
          height: 128px;
        }
        &.p-7 {
          left: 545px;
          top: 185px;
          z-index: 5;
          width: 297px;
          height: 232px;
        }
        &.p-8 {
          left: 847px;
          top: 237px;
          z-index: 2;
          width: 229px;
          height: 105px;
        }
        &.p-9 {
          left: 1117px;
          top: 132px;
          z-index: 3;
          width: 396px;
          height: 203px;
        }
        &.p-10 {
          left: 141px;
          top: 367px;
          z-index: 2;
          width: 276px;
          height: 222px;
        }
        &.p-11 {
          left: 377px;
          top: 330px;
          z-index: 4;
          width: 224px;
          height: 112px;
        }
        &.p-12 {
          left: 536px;
          top: 414px;
          z-index: 5;
          width: 161px;
          height: 95px;
        }
        &.p-13 {
          left: 738px;
          top: 363px;
          width: 189px;
          height: 146px;
        }
        &.p-14 {
          left: 1055px;
          top: 317px;
          width: 276px;
          height: 222px;
          z-index: 2;
        }
        &.p-15 {
          left: 950px;
          top: 437px;
          width: 228px;
          height: 152px;
        }
        .banner-img {
          width: 100%;
          height: 100%;
          transition: all 0.7s;
        }

        &:hover {
          z-index: 101;
          .banner-img {
            transform: scale(1.15);
          }
        }
      }
    }
  }
}
</style>
